<template>
	<div class="man">
		<div class="one">
			<label>当季目的地</label>
			<span>你朋友圈的旅游内容,我们包了</span>
			<a>更多<i class="iconfont">&#xe644;</i></a>
		</div>
		<ul class="title-ul">
			<!-- 当发生点击事件的时候要实现:1标题的默认效果要切换,2选项卡之间也需要切换 -->
			<li v-for="item in tabs" :key="item.id" :class="{'default' :iscur===item.id}" @click="iscur= item.id">
				{{item.name}}
				<span class="default-span"></span>
			</li>
		</ul>
		<!-- 调用两个选项卡子组件 -->
		<MainList v-if="iscur === 1"></MainList>
		<MainList2 v-if="iscur === 2"></MainList2>
	</div>
</template>

<script>
	import MainList from './page/MainList.vue';
	import MainList2 from './page/MainList2.vue';
	export default {
		name: 'man',
		components: {
			MainList,
			MainList2
		},
		data() {
			return {
				tabs: [
					{id: 1,name: "国内"},
					{id: 2,name: "出境"},
				],
				// 默认选中第一个标题以及第一组件
				iscur: 1
			}
		}
	}
</script>

<style scoped>
.man{
	width: 100%;
	height: 10rem;
	margin: 0.5rem auto;
	margin-top: -1.5rem;
}
.man .title-ul {
	width: 50%;
	height: 1rem;
	display: flex;
	align-items: center;
	border-radius: 0.3rem;
	margin-top: 0.2rem;
	background-color: white;
}
.man .title-ul li {
	width: 50%;
	border: 1px solid gainsboro;
	text-align: center;
	line-height: 0.8rem;
	font-size: 0.4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	margin-left: 0.2rem;
}
.man .title-ul .default:hover {
	background-color: white;
	color: orange;
}
.man .one label {
	font-weight: bold;
	font-size: 0.5rem;
	margin-left: 0.5rem;
}
.man .one span {
	margin-left: 0.5rem;
	font-size: 0.3rem;
	color: #ffa973;
	background-color: #fff3ea;
}
.man .one a{
	line-height: 0.8rem;
	font-size: 0.4rem;
	float: right;
}	
</style>
